<template>
    <div class="right">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 用户列表表格 -->
        <template>
            <el-table
                :data="userData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                type="index"
                width="50">
                </el-table-column>
                <el-table-column
                prop="authName"
                label="权限">
                </el-table-column>
                <el-table-column
                prop="path"
                label="路径">
                </el-table-column>
                <el-table-column label="等级">
                    <template slot-scope="scope">
                        <span>{{scope.row.level | levelFormate}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
import { getPowerData } from '../../api/index.js'
export default {
    data () {
        return {
            userData:[]
        }
    },
    mounted() {
        this.showUserLists()
    },
    methods: {
        showUserLists(){
            getPowerData('list').then(res=>{
                console.log(res)   
                this.userData = res.data
                console.log(this.userData);
            })
        }
    },
    filters:{
        levelFormate(level){
            if(level === '0'){
                return '一级'
            }else if(level === '1'){
                return '二级'
            }else if(level === '2'){
                return '三级'
            }
        }
    }
};
</script>


<style lang="sass" scoped>

</style>
